<template>
	<view class="invoice-add">
		<!-- 顶部提示 -->
		<view class="tips">
			根据国家税务总局规定，开具发票时，如购买方为企业需提供准确的纳税人识别号，以免无法正常报销。
		</view>

		<!-- 表单内容 -->
		<view class="form-content">
			<!-- 发票类型选择 -->
			<view class="form-item">
				<text class="label">发票类型</text>
				<view class="radio-group">
					<u-radio-group v-model="form.type" placement="row">
						<u-radio :customStyle="{marginRight: '40rpx'}" label="个人" name="个人"></u-radio>
						<u-radio label="单位" name="公司"></u-radio>
					</u-radio-group>
				</view>
			</view>

			<!-- 表单输入项 -->
			<view class="form-item">
				<text class="label">发票抬头</text>
				<u-input v-model="form.title" placeholder="请输入发票抬头" border="none"></u-input>
			</view>

			<view class="form-item">
				<text class="label">纳税人识别号</text>
				<u-input v-model="form.taxNumber" placeholder="请输入纳税人识别号" border="none"></u-input>
			</view>

			<view class="form-item">
				<text class="label">注册地址</text>
				<u-input v-model="form.address" placeholder="请输入注册地址" border="none"></u-input>
			</view>

			<view class="form-item">
				<text class="label">注册电话</text>
				<u-input v-model="form.phone" placeholder="请输入注册电话" border="none"></u-input>
			</view>

			<view class="form-item">
				<text class="label">开户银行</text>
				<u-input v-model="form.bank" placeholder="请输入开户银行" border="none"></u-input>
			</view>

			<view class="form-item">
				<text class="label">银行账号</text>
				<u-input v-model="form.bankAccount" placeholder="请输入银行账号" border="none"></u-input>
			</view>

			<!-- 邮箱输入 -->
			<view class="form-item">
				<text class="label">邮箱地址</text>
				<u-input v-model="form.email" placeholder="请输入邮箱地址" border="none"></u-input>
			</view>

			<!-- 发票类型选择 -->
			<view class="form-item">
				<text class="label">发票类型</text>
				<view class="radio-group">
					<u-radio-group v-model="form.invoiceType">
						<u-radio :customStyle="{marginRight: '40rpx'}" label="增值税发票" name="增值税发票"></u-radio>
						<u-radio label="普通发票" name="普通发票"></u-radio>
					</u-radio-group>
				</view>
			</view>

			<!-- 设为默认 -->
			<view class="form-item default">
				<u-checkbox v-model="form.isDefault" @change="changeIsDefault" label="设为默认"></u-checkbox>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer">
			<u-button color="#1C6EFB" shape="circle" text="保存" @click="onSubmit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					id: '', // 发票抬头编号
					type: '个人', // 默认个人
					title: '', // 发票抬头
					taxNumber: '', // 纳税人识别号
					address: '', // 注册地址
					phone: '', // 注册电话
					bank: '', // 开户银行
					bankAccount: '', // 银行账号
					email: '', // 邮箱
					invoiceType: '普通发票', // 发票类型:增值税/普通
					isDefault: false // 是否默认
				},
				rules: {
					title: [{ required: true, message: '请输入发票抬头' }],
					taxNumber: [
						{ required: true, message: '请输入纳税人识别号' },
						{ pattern: /^[A-Z0-9]{15,20}$/, message: '纳税人识别号格式不正确' }
					],
					phone: [
						{ pattern: /^1[3-9]\d{9}$|^0\d{2,3}-?\d{7,8}$/, message: '请输入正确的电话号码' }
					],
					email: [
						{ type: 'email', message: '请输入正确的邮箱地址' }
					]
				}
			}
		},
		onLoad({ id }) {
			if (id) {
				this.form.id = id
				this.getInvoiceInfo()
			} else {
				// 新增时的测试数据
				// this.initTestData()
			}
		},
		methods: {
			// 获取发票信息
			getInvoiceInfo() {
				this.$http_api.getInvoiceTitleInfo({ id: this.form.id }).then(res => {
					// 数据回显
					this.form = {
						...this.form,
						type: res.titleType || '个人',
						title: res.invoiceTitle || '',
						taxNumber: res.taxpayerNo || '',
						address: res.regAddress || '',
						phone: res.regPhone || '',
						bank: res.bankName || '',
						bankAccount: res.bankAccount || '',
						email: res.email || '',
						invoiceType: res.invoiceType || '普通发票',
						isDefault: res.defaultFlag || false
					}
				})
			},

			// 初始化测试数据
			initTestData() {
				if (process.env.NODE_ENV === 'development') {
					this.form = {
						...this.form,
						type: '个人',
						title: '测试公司名称',
						taxNumber: 'GST123456789012345',
						address: '测试地址',
						phone: '13800138000',
						bank: '测试银行',
						bankAccount: '6222123456789012345',
						email: 'test@example.com',
						invoiceType: '普通发票',
						isDefault: false
					}
				}
			},

			changeIsDefault(e) {
				this.form.isDefault = e;
			},

			// 表单验证
			async validate() {
				const { type, title, taxNumber } = this.form
				
				if (!title) {
					uni.showToast({ title: '请输入发票抬头', icon: 'none' })
					return false
				}

				if (type === 'company' && !taxNumber) {
					uni.showToast({ title: '请输入纳税人识别号', icon: 'none' })
					return false
				}

				if (this.form.phone && !this.rules.phone[0].pattern.test(this.form.phone)) {
					uni.showToast({ title: '请输入正确的电话号码', icon: 'none' })
					return false
				}

				if (this.form.email && !this.isValidEmail(this.form.email)) {
					uni.showToast({ title: '请输入正确的邮箱地址', icon: 'none' })
					return false
				}

				return true
			},

			// 邮箱验证
			isValidEmail(email) {
				return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
			},

			// 提交表单
			async onSubmit() {
				if (!await this.validate()) return
				
				const params = {
					titleType: this.form.type,
					invoiceTitle: this.form.title,
					taxpayerNo: this.form.taxNumber,
					regAddress: this.form.address,
					regPhone: this.form.phone,
					bankName: this.form.bank,
					bankAccount: this.form.bankAccount,
					email: this.form.email,
					invoiceType: this.form.invoiceType,
					defaultFlag: this.form.isDefault,
					id: this.form.id
				}
				let action = 'addInvoiceTitle'
				if (this.form.id != 0 && this.form.id != '') {
					action = 'editInvoiceTitle'
				}
				this.$http_api[action](params).then(res => {
					uni.showToast({ title: '保存成功' })
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}).catch(err => {
					uni.showToast({ title: err || '保存失败', icon: 'none' })
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.invoice-add {
		padding: 20rpx;
		min-height: calc(100vh + 60rpx);

		.tips {
			font-size: 24rpx;
			color: #666;
			line-height: 1.5;
			font-family: "PINGFANG";
		}

		.form-content {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 0 20rpx;
			margin-top: 20rpx;

			.form-item {
				display: flex;
				align-items: center;
				min-height: 100rpx;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.label {
					width: 220rpx;
					font-size: 28rpx;
					color: #777;
					font-family: "PINGFANG";
				}

				.radio-group {
					flex: 1;
				}

				&.default {
					justify-content: flex-start;
					padding: 20rpx 0;
				}
			}
		}

		.footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding: 20rpx 40rpx;
			background-color: #fff;
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		}
	}
</style>